// 该文件是webpack的配置文件，用于指挥webpack如何工作
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入Node中内置的path模块，用于处理路径
const path = require('path');

// 使用CJS的规范，暴露出去一个对象，该对象中就是webpack的详细配置
module.exports = {
	// 指定入口
  entry: ['./src/js/app.js','./src/index.html'],
	// 指定出口
  output: {
    filename: 'js/app.js', // 最终生成js的名
    path: path.resolve(__dirname, './build/') //最终生成js的位置
  },
	// 工作模式
	mode:'development',
	// 配置loader
	module: {
    rules: [ // rules中配置着一个一个的规则
			// 用于处理css文件
      {
        test: /\.css$/, // 匹配所有后缀为.css的文件
        use: [ 'style-loader', 'css-loader' ]
      },
			// 用于处理less文件
			{
				test: /\.less$/, // 匹配所有后缀为.less的文件
				use: [
					'style-loader', //创建style标签，将js中的样式资源插入进行，添加到head中生效
					'css-loader',   //将css变成commonjs模块加载js中，里面内容是样式字符串
					'less-loader'   //将less文件编译成css
				]
			},
			// 用于处理样式中的图片
			{
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
							outputPath:'imgs',//图片的输出路径
							name:'[hash:10].[ext]',
							limit: 8 * 1024 //图片转base64的阈值
						}
          }
        ]
      },
			// 用于处理html中的图片
			{
				test: /\.(html)$/,
				use: {
					loader: 'html-loader',
				}
			},
			// 用于处理字体文件
			{
				exclude: /\.(html|js|css|less|jpg|png|gif)/,
				use:[
					{
						loader: 'file-loader',
						options:{
							outputPath:'media',
							name:'[hash:10].[ext]',
						}
					}
				]
			},
    ]
  },
	// 配置插件
	plugins:[
		//创建一个HtmlWebpackPlugin的实例对象
		new HtmlWebpackPlugin({
			template:'./src/index.html',
		}) 
	],
	devServer: {
		// compress: true,
		port: 5000, //服务器运行的端口号
		open:true, //自动打开浏览器
		hot:true //开启了HMR（热模替换）
	}
};